<template>
	<view class="content">
		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
			<view v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
				<view class="tab2-item w-690 p-40 m-auto mt-40 flex align-items-center"
					:class="[index===0 ? 'mt-40' :''] " v-if="props.currentIndex !== 2"
					@click="$toPage(`/pages/person-of-fame/detail?id=${item.id}`)">
					<image :src="item.avatar ? item.avatar : male" class="avatar"></image>
					<view class="flex flex-col justif-between h-full w-400 ml-30">
						<text class="f-32 text-592E22 text-bold">{{ item.name }}</text>
						<text class="text-93776F f-24">{{ item.portrait  }}</text>
						<text class="text-93776F f-24 ellipsis">{{ item.achievements }}</text>
					</view>
				</view>

				<view class="tab2-item w-690 p-40 m-auto mt-40 flex align-items-center"
					:class="[index===0 ? 'mt-40' :''] " @click="$toPage(`/pages/person-of-fame/detail?id=${item.id}`)"
					v-else>
					<image :src="item.avatar ? item.avatar : male" class="avatar"></image>
					<view class="flex flex-col justify-center h-full w-400 ml-30">
						<text class="f-32 text-592E22 text-bold">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import male from '@/static/male.png'
	const {
		api_get_personOfFamePage
	} = useRequest();


	const props = defineProps({
		// 当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: function() {
				return 0;
			},
		},
		// 当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: function() {
				return 0;
			},
		},
	});

	const paging = ref(null);
	const dataList = ref([]);
	const firstLoaded = ref(false);
	const isCurrentPage = ref(false);

	const reload = () => {
		paging.value && paging.value.reload();
	};

	const queryList = (pageNo, pageSize) => {
		let params = {
			page: pageNo - 1,
			size: pageSize,
		};
		let category = 0
		if (props.tabIndex === 0) {
			category = 1
		} else if (props.tabIndex === 1) {
			category = 2
		} else if (props.tabIndex === 2) {
			category = 3
		}
		api_get_personOfFamePage(category, params).then(res => {
			firstLoaded.value = true;
			paging.value.complete(res)
		}).catch(res => {
			paging.value.complete(false);
		});
	};

	const itemClick = (item) => {
		console.log("点击了", item.title);
	};

	// 播放控制
	const isPlaying = ref(false);
	const innerAudioContext = ref(null);

	function initAudio(mp3Url) {
		// 创建音频实例
		innerAudioContext.value = uni.createInnerAudioContext();
		// 设置音频源（支持本地和网络路径）
		innerAudioContext.value.src = mp3Url;
		// 监听播放事件
		innerAudioContext.value.onPlay(() => {
			isPlaying.value = true;
			console.log("开始播放");
		});

		// 监听暂停事件
		innerAudioContext.value.onPause(() => {
			isPlaying.value = false;
			console.log("已暂停");
		});
	}

	function playAudio() {
		if (!innerAudioContext.value) return;
		isPlaying.value ? innerAudioContext.value.pause() : innerAudioContext.value.play();
	}

	watch(() => props.currentIndex,
		(newVal) => {
			if (newVal === props.tabIndex) {
				// 懒加载，当滑动到当前的item时，才去加载
				if (!firstLoaded.value) {
					// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
					nextTick(() => {
						setTimeout(() => {
							isCurrentPage.value = true;
						}, 100);
					});
				}
			}
		}, {
			immediate: true
		},
	);

	onUnload(() => {
		playAudio()
	})

	onHide(() => {
		innerAudioContext.value?.destroy();
	})
</script>

<style scoped lang="scss">
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
	}

	.sound {
		width: 128rpx;
		height: 56rpx;
		background-image: url('/src/static/bg-07.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 24rpx;
	}

	.tab1-item {
		.top {
			width: 690rpx;
			height: 638rpx;
			background-image: url('/src/static/bg-19.png');
			background-size: 100% 100%;
			overflow: hidden;
			padding: 60rpx 40rpx;

			.richText {
				height: 380rpx;
			}
		}

		.bottom {
			width: 690rpx;
			height: 1070rpx;
			background-image: url('/src/static/bg-20.png');
			background-size: 100% 100%;
			overflow: hidden;
			padding: 140rpx 40rpx 40rpx 40rpx;

			.richText {
				height: 760rpx;
			}
		}
	}

	.tab2-item {
		width: 690rpx;
		height: 220rpx;
		background-image: url('/src/static/bg-21.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
</style>